import React from 'react';
import { useState, useEffect } from 'react';
import styles from './index.less';

let SubmitBtn = ({ style = {}, loading, click, children }) => {
  let [show, cshow] = useState(false);

  useEffect(() => {
    if (loading) {
      setTimeout(() => {
        cshow(true);
      }, 400);
    }
  }, [loading]);

  return (
    <div
      className={loading ? styles.btns : styles.btn}
      style={{
        ...style,
        transition: 'all 0.4s',
        width: loading ? 60 : style.width,
        borderRadius: loading ? 60 : style.borderRadius ?? 6,
      }}
      onClick={() => {
        click && click();
      }}
    >
      {loading && (
        <ul
          className={styles.loader}
          style={{ transition: 'all 0.4s', opacity: show ? 1 : 0 }}
        >
          <li></li>
        </ul>
      )}

      <div className={styles.loader}>
        {!loading ? (
          <span style={{ fontSize: 18 }}>{children}</span>
        ) : (
          <span style={{ fontSize: 12 }}>提交中</span>
        )}
      </div>
    </div>
  );
};

export default SubmitBtn;
